<template>
	<view class="content">
		<view class="topBox">
			<view class="setBox">
				<view class="set-left">
					<uni-icons type="calendar" size="30" color="#fff"></uni-icons>
					<view class="txt">签到</view>
				</view>
				<view class="set-right">
					<uni-icons type="gear" size="30" color="#fff"></uni-icons>
					<uni-icons type="chat" size="30" color="#fff"></uni-icons>
				</view>
			</view>
			<view class="users">
				<view class="u-top">
					<template v-if="!userInfo.nickName">
						<image src="../../static/tt.jpg" mode="aspectFill"></image>
						<view class="txt" @click="setFun">
							注册/登录
						</view>
					</template>
					<template v-else>
						<image :src="userInfo.avatarUrl" mode="aspectFill"></image>
						<view class="txt">
							{{userInfo.nickName}}
						</view>
					</template>
				</view>
				<view class="u-bottom">
					<view class="u-item">
						<view class="num">12</view>
						<view class="u-tit">点赞</view>
					</view>
					<view class="u-item">
						<view class="num">12</view>
						<view class="u-tit">喜欢</view>
					</view>
					<view class="u-item">
						<view class="num">12</view>
						<view class="u-tit">收藏</view>
					</view>
					<view class="u-item">
						<view class="num">12</view>
						<view class="u-tit">浏览</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="listBox">
			<view class="lists">
			    <uni-list>
			        <uni-list-item 
					:showExtraIcon="true" 
					:extraIcon="extraIcon1" 
					showArrow 
					title="个人信息" 
					clickable>
					</uni-list-item>
					
					<uni-list-item
					:showExtraIcon="true" 
					:extraIcon="extraIcon2" 
					showArrow 
					title="购物车" 
					clickable>
					</uni-list-item>
					
					<uni-list-item
					:showExtraIcon="true" 
					:extraIcon="extraIcon3" 
					showArrow 
					title="用户反馈" 
					clickable>
					</uni-list-item>
					
					<uni-list-item
					:showExtraIcon="true" 
					:extraIcon="extraIcon4" 
					showArrow 
					title="我的邮件" 
					clickable>
					</uni-list-item>
					
					<uni-list-item
					:showExtraIcon="true" 
					:extraIcon="extraIcon5" 
					showArrow 
					title="分享有礼" 
					clickable>
					</uni-list-item>
					

			    </uni-list>
			</view>
		</view>
		
		<up-popup :show="show" closeable @close="close" round='20'>
			<view class="popup">
				<view class="title">获取您的昵称、头像</view>
				<view class="flex">
					<view class="label">获取用户头像：</view>
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class='avatar' :src='tempUserInfo.avatarUrl'></image>
					</button>
				</view>
				<view class="flex">
					<view class="label">获取用户昵称：</view>
					<input type='nickname' :value='tempUserInfo.nickName' @input='changeName'>
				</view>
				<button size="default" type="primary" @click="userSubmit">确定</button>
			</view>
		</up-popup>
	</view>
</template>

<script>
	import {login, getUserInfo} from '../../api/api.js'
	export default {
		data() {
			return {
				userInfo: {
					nickName: '',
					avatarUrl: ''
				},
				tempUserInfo: {
					nickName: '',
					avatarUrl: ''
				},
				show: false,
				extraIcon1: {
					color: '#666666',
					size: '22',
					type: 'auth'
				},
				extraIcon2: {
					color: '#666666',
					size: '22',
					type: 'cart'
				},
				extraIcon3: {
					color: '#666666',
					size: '22',
					type: 'chatboxes'
				},
				extraIcon4: {
					color: '#666666',
					size: '22',
					type: 'email'
				},
				extraIcon5: {
					color: '#666666',
					size: '22',
					type: 'gift'
				}
			}
		},
		methods: {
			setFun(){
				uni.showModal({
					title:'温馨提示',
					content: '授权微信登陆后才能正常使用小程序',
					success: (res)=>{
						if(res.confirm){
							uni.login({
								success: async (res)=>{
									const {token} = await login(res.code)
									console.log(token, 'token')
									uni.setStorageSync('token', token)
									const {avatarUrl, nickName } = await getUserInfo()
									this.tempUserInfo.avatarUrl = avatarUrl
									this.tempUserInfo.nickName = nickName
									this.show = true
								},
							})
						}
					}
				})
			},
			
			onChooseAvatar(e){
				this.tempUserInfo.avatarUrl=e.detail.avatarUrl
			},
			
			changeName(e){
				this.tempUserInfo.nickName=e.detail.value
			},
			
			close() {
				this.show = false
				this.tempUserInfo = { nickName: '', avatarUrl: '' }
			},
			
			userSubmit() {
				this.userInfo.avatarUrl = this.tempUserInfo.avatarUrl
				this.userInfo.nickName = this.tempUserInfo.nickName
				uni.setStorageSync('userInfo', JSON.stringify(this.userInfo))
				this.show = false
			},
		},
		async onLoad(){
			console.log('onLoad')
			
			try {
				if(uni.getStorageSync('token') && !uni.getStorageSync('userInfo')) {
					console.log(1)
					const {avatarUrl, nickName } = await getUserInfo()			
					this.userInfo.avatarUrl = avatarUrl
					this.userInfo.nickName = nickName
				}else if(uni.getStorageSync('token') && uni.getStorageSync('userInfo')){
					console.log(2)
					const {avatarUrl, nickName } = JSON.parse(uni.getStorageSync('userInfo'))
					this.userInfo.avatarUrl = avatarUrl
					this.userInfo.nickName = nickName
				}
			} catch (error) {
				console.error('onLoad中获取用户信息失败:', error)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		background-color: #f5f5f5;
		
		.topBox {
			// height: 200rpx;
		    width: 100%;
		    position: relative;
		    z-index: 1;
		    overflow: hidden;
		    padding: 40rpx 20rpx 40rpx;
		    box-sizing: border-box;
		}
		
		.topBox::after {
		    content: "";
		    width: 140%;
		    height: 200rpx;
		    position: absolute;
		    top: 0;
		    left: -20%;
		    background-color: #00aaff;
		    border-radius: 0 0 50% 50%;
			z-index: -1;
		}
		
		.setBox {
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    
		    .set-left {
		        width: 18%;
		        display: flex;
		        justify-content: space-between;
		        align-items: center;
		    }
		    
		    .txt {
		        color: #fff;
		        font-size: 30rpx;
		    }
		}
		
		.users {
		    margin-top: 35rpx;
		    padding: 30rpx;
		    box-sizing: border-box;
		    height: 280rpx;
		    background-color: #fff;
		    box-shadow: 1px 10rpx 20rpx #eeeeec;
		    border-radius: 16rpx;
		    
		    .u-top {
		        display: flex;
		        justify-content: flex-start;
		        align-items: center;
		        margin-bottom: 30rpx;
		        
		        image {
		            width: 100rpx;
		            height: 100rpx;
					border-radius: 50%;
					margin-right: 20rpx;
		        }
				.txt{
					font-size: 30rpx;
					font-weight: 700;
				}
		    }
			
			.u-bottom {
				display: flex;
				justify-content: space-around;
				align-items: center;
				
				.u-item {
					text-align: center;
					
					.u-tit {
						color: #757575;
						font-size: 26rpx;
						margin-top: 10rpx;
					}
					
					.num {
						color: #000;
						font-size: 33rpx;
						font-weight: 700;
					}
				}
			}
		}
		.popup {
		    padding: 20rpx;
		    border-radius: 20rpx 20rpx 0 0;
		    
		    .title {
		        margin-bottom: 20rpx;
		        font-size: 40rpx;
		        text-align: center;
		    }
		    
		    .flex {
		        display: flex;
		        justify-content: flex-start;
		        align-items: center;
		        border-bottom: 1px solid #f5f5f5;
		        padding: 24rpx 0;
		    }
		    
		    image {
		        width: 70rpx;
		        height: 70rpx;
		    }
			.avatar-wrapper{
				border: none;
				border-radius: 10rpx;
				width: 70rpx;
				height: 70rpx;
				margin-left: 20rpx;
				padding: 0;
			}
		}
		.listBox {
		    height: 200rpx;
		    margin: -10rpx auto 0;
		    padding: 20rpx;
		    box-sizing: border-box;
		    border-radius: 12rpx;
		}
		
	}
</style>
